<template>
  <div class="clearfix">
    <!-- 横条 -->
    <el-row class="row">
      <el-col :span="21" vertical-align="center" fixed="right">
        接口自动化任务列表
      </el-col>
      <el-col :span="3" vertical-align="center">
        <el-button @click="openCreateDialog()" type="primary" outline>新建项目</el-button>
      </el-col>
    </el-row>
    <div  style="font-size:90%">项目选择
    <el-select v-model="typeId" placeholder="请选择" @change="changetypeId()">
      <el-option
        v-for="item in typeList"
        :key="item.id"
        :label="item.name"
        :value="item.id">
      </el-option>
    </el-select>
    </div>
    <!-- 表格数据 -->
    <el-table ref="form" :data="form" :model="form" label-width="250px">
      <el-table-column prop="project_name" label="项目" fixed="left" width=300>
      </el-table-column>

      <el-table-column label="模块" width=200>
        <template slot-scope="{row}">
            <div slot="reference">
                    <el-link target="_blank" :href="'https://www.shopee-qa.com/api/#/task'" type="primary">{{row.task_name}}</el-link>
            </div>
        </template>
      </el-table-column>

      <el-table-column prop="mtime" label="最近执行时间" width=200>
      </el-table-column>

      <el-table-column prop="last_person" label="最近执行人" width=200>
      </el-table-column>

      <el-table-column label="执行" width=“1200”>
          <template slot-scope="props">
              <el-button  size="small" @click="openDialog(props.row)" type="primary" outline>执行</el-button>
              <el-button  size="small" @click="goAutoTaskHistoryList(props.row)" type="primary" outline>执行记录</el-button>
          </template>
      </el-table-column>
    </el-table>
    <br>
    <!-- 分页 -->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[5, 10, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalRow">
    </el-pagination>

    <!-- 新建task弹窗 -->
    <el-dialog title="新建接口自测任务" :visible.sync="centerDialogVisible" width="40%">
      <el-form ref="createData" :model="createData" label-width="150px">
         <el-row>
          <el-col :span="2" vertical-align="center" fixed="left">
            <p>Env</p>
          </el-col>
          <el-col :span="16">
            <el-form-item>
              <el-radio v-model="createData.env" label="test">test</el-radio>
              <el-radio v-model="createData.env" label="uat">uat</el-radio>
              <el-radio v-model="createData.env" label="staging">staging</el-radio>
            </el-form-item>
          </el-col>
        </el-row>
        <div v-if= "now_project_name === 'MBS' && createData.env === 'test'">
          <el-row>
            <el-col :span="6" vertical-align="center" fixed="left">
              <p>Membership Main</p>
            </el-col>
            <el-col :span="16" vertical-align="center" fixed="right" size="medium">
              <template>
                <el-select v-model="createData.mbs_main" style="width:90%" placeholder="请选择">
                  <el-option v-for="item in MbsMain" :key="item" :label="item" :value="item">
                  </el-option>
                </el-select>
              </template>
            </el-col>
          </el-row>
          <br>
          <el-row>
            <el-col :span="6" vertical-align="center" fixed="left">
              <p>Membership Rule</p>
            </el-col>
            <el-col :span="16" vertical-align="center" fixed="right" size="medium">
              <template>
                <el-select v-model="createData.mbs_rule" style="width:90%" placeholder="请选择">
                  <el-option v-for="item in MbsRule" :key="item" :label="item" :value="item">
                  </el-option>
                </el-select>
              </template>
            </el-col>
          </el-row>
        </div>
        <div v-else-if="now_project_name === 'CRM' && createData.env === 'test'">
          <el-row>
            <el-col :span="6" vertical-align="center" fixed="left">
              <p>Crm Main</p>
            </el-col>
            <el-col :span="16" vertical-align="center" fixed="right" size="medium">
              <template>
                <el-select v-model="createData.crm_main" style="width:90%" placeholder="请选择">
                  <el-option v-for="item in CrmMain" :key="item" :label="item" :value="item">
                  </el-option>
                </el-select>
              </template>
            </el-col>
          </el-row>
        </div>
        <div v-else>
          <el-row>
            <p>非Test环境不能选择PFB分支</p>
          </el-row>
        </div>
        <br>
        <el-row>
          <el-col>
              <p><span style="color:red;">运行前请注意检查spex pfb是否需要设置，是否部署完成</span></p>
          </el-col>
        </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button align=right type="primary" @click="createNewAutoTask('createData')">立即创建</el-button>
        </div>
    </el-dialog>

    <!-- 新建项目模块弹窗 -->
    <el-dialog title="新建模块" :visible.sync="CreateDialogVisible" width="40%">
      <el-form ref="createProjectData" :model="createProjectData" label-width="150px">
        <el-row>
          <el-col>
            <el-form-item label="模版项目id填写" prop="project_id">
              <el-input v-model="createProjectData.project_id" placeholder="填写在自动化平台查询的project_id"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="模版项目name填写" prop="project_name">
              <el-input v-model="createProjectData.project_name" placeholder="填写在自动化平台查询的project_name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="模版任务id填写" prop="template_task_id">
              <el-input v-model="createProjectData.template_task_id" placeholder="填写在自动化平台查询的template_task_id"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="模版任务name填写" prop="template_task_name">
              <el-input v-model="createProjectData.template_task_name" placeholder="填写在自动化平台查询的task_name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="自定义模块名填写" prop="task_name">
              <el-input v-model="createProjectData.task_name" placeholder="自定义模块命名"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
              <el-button type="primary" @click="createNewModularTask('createProjectData')">立即创建</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
  import {api, postRequest, getRequest} from "@/api/commit";
  export default {
    name: "CreateAutoTask",
    data() {
      return {
        now_project_id:"",
        now_template_task_id:"",
        now_project_name:"",
        now_template_task_name:"",
        now_task_name:"",
        centerDialogVisible: false,
        CreateDialogVisible: false,
        currentPage: 1,
        totalRow: 0,
        pageSize: 10 ,
        MbsMain:[],
        MbsRule:[],
        CrmMain:[],
        createProjectData:{
          "project_id": "",
          "project_name": "",
          "template_task_id": "",
          "template_task_name": "",
          "task_name":""
        },
        createData:{
          "project_name":"",
          "project_id":"",
          "template_task_name":"",
          "template_task_id":"",
          "task_name":"",
          "mbs_rule":"",
          "mbs_main":"",
          "crm_main":"",
          "notice_people":"",
          "env":"test"
        },
        typeId:"MBS",
        typeList: [{
              id: "MBS",
              name: 'MBS'
            },{
              id: "CRM",
              name: 'CRM'
            },{
              id: "Friends",
              name: 'Friends'
        }],
        rules: {
          env: [
            {required: true, message: 'env不能为空', trigger: 'blur'}
          ],
        },
        form: []
      }
    },
    components:{
    },
    methods: {
      changetypeId(){
        this.init_data()
      },
      openCreateDialog: function(){  
        this.CreateDialogVisible = true
      },
      createNewModularTask(createProjectData) {
        this.$refs[createProjectData].validate((valid) => {
          if (!valid) {
            this.$message({
              "message": "请检查表单！",
              "type": "warning"
            })
            return
          }
          let tmp = Object.assign({}, this.createProjectData);
          let params = {}
          params.project_id=tmp.project_id
          params.template_task_id=tmp.template_task_id
          params.project_name= tmp.project_name
          params.template_task_name= tmp.template_task_name
          params.task_name= tmp.task_name
          postRequest(api['create_template_task'], params).then((res)=>{
            this.createProjectData.project_id=""
            this.createProjectData.template_task_id=""
            this.createProjectData.project_name=""
            this.createProjectData.template_task_name=""
            this.createProjectData.task_name=""
            this.CreateDialogVisible = false
            this.init_data()
          },(error)=>{
            this.resultReturn = "请检查您的输入是不是有问题&依赖方报错俺也没办法"
          })
        })
      },  

      goAutoTaskHistoryList: function(row){        
        this.$router.push({
          path: '/ToolsAutoHistoryPage',
          query:{
            template_task_id:row.template_task_id,
            project_name:row.project_name,
            project_task_name:row.task_name
          }
        })
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.init_data();
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.init_data();
      },
      openDialog: function(row){  
        this.centerDialogVisible = true
        this.now_project_id = row.project_id
        this.now_template_task_id = row.template_task_id
        this.now_project_name = row.project_name
        this.now_template_task_name = row.template_task_name
        this.now_task_name = row.task_name
        this.createData.mbs_rule=""
        this.createData.mbs_main=""
        this.createData.crm_main=""
        this.createData.notice_people=""
        this.createData.env="test"
      },

      init_data() {
        getRequest(api['template_task_list'],{
          "page_size":this.pageSize,"page":this.currentPage,"project_name":this.typeId}).then((res) => {
          res = res.resultReturn
          this.form= res.data
          this.totalRow=res.total
        }, (error) => {
          console.info(error)
        }),
        getRequest(api['sycn_result']).then((result) => {
        }),
        getRequest(api['get_pfb']).then((res) => {
          res = res.resultReturn
          this.MbsRule= res.SPC_PFB_MEMBERSHIP_RULE
          this.MbsMain= res.SPC_PFB_MEMBERSHIP_MAIN
          this.CrmMain= res.SPC_PFB_CRM_MAIN
        }, (error) => {
          console.info(error)
        })
      },   
      createNewAutoTask(createData) {
        this.$refs[createData].validate((valid) => {
          if (!valid) {
            this.$message({
              "message": "请检查表单！",
              "type": "warning"
            })
            return
          }
          let tmp = Object.assign({}, this.createData);
          let params = {}
          params.project_id=this.now_project_id
          params.template_task_id=this.now_template_task_id
          params.project_name=this.now_project_name
          params.template_task_name=this.now_template_task_name
          params.task_name=this.now_task_name
          params.mbs_rule=tmp.mbs_rule
          params.mbs_main=tmp.mbs_main
          params.crm_main=tmp.crm_main
          params.env=tmp.env
          params.notice_people=tmp.notice_people
          postRequest(api['create_api_test'], params).then((res)=>{
            this.resultReturn = res.resultReturn
            this.createData.mbs_rule=""
            this.createData.env=""
            this.createData.mbs_main=""
            this.createData.crm_main=""
            this.createData.notice_people=""
            this.now_project_id=""
            this.now_template_task_id=""
            this.now_project_name=""
            this.now_template_task_name=""
            this.now_task_name=""
            this.centerDialogVisible = false
            this.init_data()
          },(error)=>{
            this.resultReturn = "请检查您的输入是不是有问题&依赖方报错俺也没办法"
          })
        })
      }    
    },
    mounted () {
      this.init_data()
    }
  }
</script>

<style scoped>

</style>
